<template>
    <div class="user">
        <!-- <h1>个人中心页面</h1> -->
        <div class="top-bj">
            <div class="box">
                <img :src="myuser.avatar" alt="" />
                <div>
                    <span>{{ myuser.nickname }}</span>
                    <i>id:{{ myuser.uid }}</i>
                </div>
                <p>{{ myuser.vip_name }}12</p>
                <router-link tag="span" to="/info" class="set iconfont icon-shezhi1" @click="myinfo">&#xe68c;</router-link>
            </div>
        </div>
        <!-- 我的余额部分 -->
        <div class="red-bj"></div>
        <ul class="price">
            <router-link to="/balance" tag="li">
                <span>我的余额</span>
                <i>{{ money }}</i>
            </router-link>
            <li>
                <span>当前佣金</span>
                <i>0.00</i>
            </li>
            <li>
                <span>优惠卷</span>
                <i>0</i>
            </li>
        </ul>

        <!-- 我的订单部分 -->
        <div class="order">
            <!-- <div class="order-top">
                <span>我的订单</span>
                <i>全部订单</i>
            </div> -->
            <van-cell title="我的订单" is-link value="全部订单" to="/orders/1" />
            <ul class="order-bottom">
                <router-link tag="li" :to="`/orders/${1}`">
                    <img src="../assets/image/1.png" alt="" />
                    <span>待付款</span>
                </router-link>
                <router-link tag="li" :to="`/orders/${2}`">
                    <img src="../assets/image/2.png" alt="" />
                    <span>待发货</span>
                    <i v-if="dropShipping.length > 0">{{ dropShipping.length }}</i>
                </router-link>
                <router-link tag="li" :to="`/orders/${3}`">
                    <img src="../assets/image/3.png" alt="" />
                    <span>待收货</span>
                </router-link>
                <router-link tag="li" :to="`/orders/${4}`">
                    <img src="../assets/image/4.png" alt="" />
                    <span>待评价</span>
                </router-link>
                <router-link tag="li" :to="`/orders/${5}`">
                    <img src="../assets/image/5.png" alt="" />
                    <span>售后/退款</span>
                    <!-- <i>{{ myuser.orderStatusNum.refund_count }}</i> -->
                </router-link>
            </ul>
        </div>

        <!-- 我的服务部分 -->
        <div class="service">
            <div class="service-top">我的服务</div>

            <ul class="service-bottom">
                <li @click="developing">
                    <img src="../assets/image/a.png" alt="" />
                    <span>会员中心</span>
                </li>
                <li @click="developing">
                    <img src="../assets/image/b.png" alt="" />
                    <span>砍价记录</span>
                </li>
                <li @click="developing">
                    <img src="../assets/image/c.png" alt="" />
                    <span>我的推广</span>
                </li>
                <router-link tag="li" to="/balance">
                    <img src="../assets/image/d.png" alt="" />
                    <span>我的余额</span>
                </router-link>

                <router-link tag="li" to="/home/menus/6">
                    <img src="../assets/image/e.png" alt="" />
                    <span>地址信息</span>
                </router-link>
                <router-link to="/collect" tag="li">
                    <img src="../assets/image/f.png" alt="" />
                    <span>我的收藏</span>
                </router-link>
                <li @click="developing">
                    <img src="../assets/image/g.png" alt="" />
                    <span>优惠卷</span>
                </li>
                <li @click="developing">
                    <img src="../assets/image/h.png" alt="" />
                    <span>联系客服</span>
                </li>
            </ul>
        </div>

        <!-- 用户信息 -->
        <div style="display: flex" v-if="myuser"></div>
    </div>
</template>

<script>
import { mapState, mapGetters, mapMutations } from "vuex";
export default {
    data() {
        return {
            count: 1,
        };
    },
    computed: {
        // 登录数据
        ...mapState(["loginuser", "dropShipping", "money"]),
        ...mapGetters(["myuser"]), // 获取用户数据,防止刷新
    },
    methods: {
        // 退出登录
        ...mapMutations(["loginout"]),

        // 退出登录
        loginouts() {
            this.loginout();
            this.$router.push("/login");
        },
        myinfo() {
            console.log(123);
        },
        developing() {
            // this
            this.$dialog
                .alert({
                    message: "不好意思,给不了更多",
                })
                .then(() => {
                    // on close
                });
        },
    },
    created() {
        console.log("用户信息", this.myuser);
    },
};
</script>

<style lang="scss" scoped>
.user {
    background: #f5f5f5;
    height: 100vh;
}
// 头部部分
.top-bj {
    width: 100vw;
    height: 95px;
    background: #e93323;
    .box {
        display: flex;
        height: 100%;
        position: relative;
        align-items: center;
        img {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            margin-left: 10px;
        }
        div {
            margin: 0 10px;
            font-size: 16px;
            color: #fff;
            display: flex;
            flex-direction: column;
            i {
                color: #ccc;
                margin-top: 5px;
            }
        }
        p {
            font-size: 12px;
            background: #bb291c;
            color: #fff;
            width: 76px;
            border-radius: 12px;
            text-align: center;
            padding: 5px 0;
            transform: translateY(-30%);
        }
        .set {
            width: 18px;
            height: 18px;
            color: #fff;
            position: absolute;
            top: 37%;
            right: 0%;
            transform: translate(-50%, -50%);
            font-size: 18px;
        }
    }
}
// 我的余额部分
.red-bj {
    height: 35px;
    background: #e93323;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}
.price {
    width: 355.2px;
    height: 70px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    border-radius: 5px;
    // border: 1px solid black;
    transform: translateY(-50%);
    li {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        // border: 1px solid black;
        border-right: 1px solid rgba(178, 167, 167, 0.5);

        &:nth-child(3) {
            border-right: none;
        }
        span {
            font-size: 14px;
            color: rgb(106, 103, 103);
        }
        i {
            text-align: center;
            font-size: 20px;
            margin-top: 10px;
        }
    }
}

// 我的订单部分
.order {
    margin: 10px;
    background: #fff;
    display: flex;
    flex-direction: column;
    border-radius: 5px;
    justify-content: space-around;
    height: 125px;
    transform: translateY(-38px);
    .order-top {
        display: flex;
        justify-content: space-between;
        font-size: 16px;
        margin: 0 15px;
    }
    .order-bottom {
        display: flex;
        align-items: center;
        justify-content: center;

        li {
            flex: 1;
            font-size: 12px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            img {
                width: 24.5px;
                height: 21px;
            }
            span {
                margin-top: 10px;
            }
            position: relative;
            i {
                border: 1px solid orangered;
                position: absolute;
                background: #fff;
                border-radius: 20px;
                padding: 1px 5px;
                color: orangered;
                top: 0%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
        }
    }
}

// 我的服务部分
.service {
    margin: 10px;
    background: #fff;
    display: flex;
    flex-direction: column;
    border-radius: 5px;
    justify-content: space-around;
    // height: 125px;
    transform: translateY(-40px);
    .service-top {
        display: flex;
        justify-content: space-between;
        font-size: 16px;
        padding: 0px 15px;
        line-height: 44px;
        height: 44px !important;
        border-bottom: 0.5px solid rgba(223, 220, 220, 0.3);
    }
    .service-bottom {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        justify-content: center;
        height: 172px;

        li {
            width: 80px;
            font-size: 12px;

            // border: 1px solid red;
            // margin-top: 10px;

            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            img {
                width: 26px;
                height: 26px;
            }
            span {
                margin-top: 10px;
            }
        }
    }
}
</style>
